<template name="home">
	<view class="check">
		<img
			src="/static/img/bg.png"
			alt=""
			class="hubg"
		/>
		<view class="login-bg">
			<view class="login-card">
				<view class="biaoti">请输入您的姓名及证件号码</view>
				<view class="cu-bar bg-white search">
					<view class="search-form">
						<img
							src="/static/img/xm.png"
							alt=""
							class="icon"
						>
						<input
							type="text"
							placeholder="请输入您的真实姓名"
							v-model="data.name"
						></input>
					</view>
				</view>
				

				<view class="cu-bar bg-white search">
					<view class="search-form">
						<img
							src="/static/img/zj.png"
							alt=""
							class="icon"
						>
						<input
							type="text"
							v-model="data.idCard"
							placeholder="请输入证件号码"
							@input="idCardChange"																				
						></input>
					</view>
				</view>
				<view class="defaultbox">
						<view style="margin-left:10px">是否默认：</view>
						<switch @change="SwitchA" :class="switchA?'checked':''" :checked="switchA?true:false"></switch>

					</view>
				<view class="padding flex flex-direction">
					<button
						class="cu-btn blue margin-tb-sm lg"
						@click="add"
						v-if="type=='add'"
					>
						添加
					</button>
					<button
						class="cu-btn blue margin-tb-sm lg"
						@click="edit"
						v-if="type=='edit'"
					>
						编辑
					</button>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "home",
  components: {},
  data() {
    return {
      title: "Hello",
      data: {
        name: "",
        idCard: "",
      },
      item: "",
      index: 0,
      switchA: false,
      type: "add",
    };
  },
  computed: {
    ...mapState({
      user: "user",
    }),
  },

  onShow() {},
  methods: {
    ...mapMutations({
      setUser: "setUser",
    }),

    bindPickerChange(e) {
      console.log("picker发送选择改变，携带值为", e.target.value);
      this.index = e.target.value;
    },
    idCardChange($event) {
      this.data.idCard = $event.target.value.replace(/\s+/g, "");
    },
    add() {
      if (!this.data.name) {
        uni.showToast({
          icon: "none",
          title: "请填写真实姓名",
          duration: 2000,
        });
        return;
      }
      var reg = new RegExp(/^[a-zA-Z0-9]{1,20}$/);
      if (!this.data.idCard || !reg.test(this.data.idCard)) {
        uni.showToast({
          icon: "none",
          title: "请填写正确证件号",
          duration: 2000,
        });
        return;
      }
      uni.showLoading({
        title: "提交中",
        mask: true,
      });
      this.$http
        .post(
          "/tenant/contacts/add",
          {
            defaultInfo: this.switchA ? 1 : 0,
            idCard: this.data.idCard,
            name: this.data.name,
            phoneNumber: uni.getStorageSync("phone"),
          },
          {
            header: {
              "Content-Type": "application/json;charset=UTF-8",
            } /* 会覆盖全局header */,
            dataType: "json",
            responseType: "text",
          }
        )
        .then((res) => {
          let data = res.data;
          if (data.code == 0) {
            uni.hideLoading();
            uni.navigateBack({
              delta: 1,
            });
          } else {
            uni.showToast({
              image: "/static/img/warn.png",
              title: data.msg,
              duration: 2000,
              mask: true,
            });
          }
        });
    },
    edit() {
      if (!this.data.name) {
        uni.showToast({
          icon: "none",
          title: "请填写真实姓名",
          duration: 2000,
        });
        return;
      }
      var reg = new RegExp(/^[a-zA-Z0-9]{1,20}$/);
      console.log(!reg.test(this.data.idCard));
      if (!this.data.idCard || !reg.test(this.data.idCard)) {
        uni.showToast({
          icon: "none",
          title: "请填写正确证件号",
          duration: 2000,
        });
        return;
      }
      uni.showLoading({
        title: "提交中",
        mask: true,
      });
      this.$http
        .post(
          "/tenant/contacts/edit",
          {
            defaultInfo: this.switchA ? 1 : 0,
            idCard: this.data.idCard,
            name: this.data.name,
            phoneNumber: uni.getStorageSync("phone"),
            createTenantId: this.data.createTenantId,
            id: this.data.id,
            tenantContactsInfoId: this.data.tenantContactsInfoId,
          },
          {
            header: {
              "Content-Type": "application/json;charset=UTF-8",
            } /* 会覆盖全局header */,
            dataType: "json",
            responseType: "text",
          }
        )
        .then((res) => {
          let data = res.data;
          if (data.code == 0) {
            uni.hideLoading();
            uni.navigateBack({
              delta: 1,
            });
          } else {
            uni.showToast({
              image: "/static/img/warn.png",
              title: data.msg,
              duration: 2000,
              mask: true,
            });
          }
        });
    },
    SwitchA(e) {
      this.switchA = e.detail.value;
    },
  },

  watch: {},
  onLoad(options) {
    this.type = options.type;
    if (options.type == "edit") {
      let data = JSON.parse(options.data);
      this.data = data;
      this.switchA = data.defaultInfo == 1 ? true : false;
    }
  },
};
</script>

<style lang="scss">
.check {
  .cu-bar .search-form {
    height: 88rpx !important;
    border-radius: 8px;
    line-height: 88rpx !important !important;
  }
}

.hubg {
  position: fixed;
  top: 0;
  height: 300rpx;
  z-index: -1;
  width: 100%;
}
.icon {
  width: 32rpx;
  height: 32rpx;
  margin-left: 5px;
  margin-right: 5px;
}
.biaoti {
  font-size: 14px;
  font-family: AlibabaPuHuiTiR;
  font-weight: 400;
  color: rgba(255, 145, 37, 1);
  margin-left: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.content {
  /* height: 400px; */
  /* height:100vh */
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.loginpart {
  flex: 1;
}
.landing {
  height: 84upx;
  line-height: 84upx;
  border-radius: 44upx;
  font-size: 32upx;
  background: #4382ff;
}
.login-btn {
  padding: 10upx 20upx;
  margin-top: 350upx;
}
.login-function {
  overflow: auto;
  padding: 20upx 20upx 30upx 20upx;
}
.login-forget {
  float: left;
  font-size: 26upx;
  color: #999;
}
.login-register {
  color: #666;
  float: right;
  font-size: 26upx;
}
.login-input input {
  background: #f8f8f8;
  font-size: 28upx;
  padding: 10upx 25upx;
  height: 62upx;
  line-height: 62upx;
  border-radius: 8upx;
}
.login-margin-b {
  margin-bottom: 25upx;
}
.login-input {
  padding: 10upx 20upx;
}
.login-head {
  font-size: 46upx;
  text-align: center;
  padding: 25upx 10upx 55upx 10upx;
  display: flex;
  justify-content: center;
}
.login-card {
  background: #fff;
  border-radius: 12upx;
  padding: 10upx 25upx;
  box-shadow: 0 6upx 18upx rgba(0, 0, 0, 0.12);
  position: relative;
  /* margin-top: 120upx; */
}
.login-bg {
  height: 260upx;
  padding: 25upx;
  background: #4382ff;
}
.liji {
  font-size: 24upx;
  color: #787878;
}
.lijil,
.lijir {
  color: #4382ff;
}
.lijir {
  margin-left: 10upx;
}
.blue {
  background: #4382ff !important;
  color: white;
}
.xieyi {
  color: #ff9429;
}
.yiyuedu {
  color: #7c7c7c;
}
.foot {
  justify-content: center;
  align-items: center;
}
.banner {
  width: 100%;
  /* position: absolute; */
  /* bottom: 42px; */
  height: 164upx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffa98a;
}
.hubg {
  position: absolute;
  top: 0;
  height: 300rpx;
  z-index: -1;
  width: 100%;
}
.userAvatarUrl {
  height: 100px;
  width: 100px;
}
.userinfo-avatars {
  overflow: hidden;
  display: block;
  width: 160rpx;
  height: 160rpx;
  margin: 20rpx;
  /* border-radius: 50%; */
  border: 2px solid #fff;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
  /* margin-left: 10px; */
}
.txl {
  height: 30px;
  width: 30px;
  margin-right: 10px;
}
.defaultbox {
  display: flex;
  align-items: center;
  margin-left: 5px;
  margin-top: 5px;
}
</style>
